<template>
  <div class="dashboard-container">
    <div class="app-container">
      <page-tools>
        <template v-slot:after>
          <el-button type="primary" @click="openAddOrEditDialog('add','0', 1)"
            >添加</el-button
          >
          <!-- 0 代表的是添加的pid  1代表的是上面按钮的添加 2代表的是下面表格里的添加-->
        </template>
      </page-tools>
      <el-card>
        <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          default-expand-all
        >
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="code" label="标识"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="openAddOrEditDialog('add', scope.row, 2)"
                v-if="scope.row.type === 1"
                >添加</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="openAddOrEditDialog('edit', scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="text"
                @click="handleDel(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 新增/编辑权限对话框 -->
      <el-dialog
        :title="type == 'add' ? '新增权限' : '编辑权限'"
        :visible.sync="dialogVisible"
        width="60%"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <el-form-item label="权限名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="权限标识" prop="code">
            <el-input v-model="ruleForm.code"></el-input>
          </el-form-item>
          <el-form-item label="权限描述" prop="description">
            <el-input v-model="ruleForm.description"></el-input>
          </el-form-item>
          <el-form-item label="开/关" prop="age">
            <el-switch
              v-model="ruleForm.enVisible"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            >
            </el-switch>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getAllPermission,
  addPermission,
  delPermission,
  getPermission,
  putPermission,
} from "@/api/permission.js";
import { transTree } from "@/utils";
export default {
  data() {
    return {
      dialogVisible: false,
      tableData: [],
      ruleForm: {
        name: "", // 名称
        code: "", // 标识
        description: "", // 描述
        type: "", // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: "", // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: "0", // 开启
      },
      type: "add",
      rules: {
        name: [{ required: true, message: "请输入权限名称", trigger: "blur" }],
        code: [{ required: true, message: "请输入权限标识", trigger: "blur" }],
      },
      app: [
        // 当type为1时为访问权限，type为2时为功能权限
        {
          id: "1063313020819738624",
          name: "查看部门",
          type: 2,
          code: "point-dept",
          description: "查看部门的按钮",
          pid: "1",
          enVisible: "0",
        },
        {
          id: "1063315016368918528",
          name: "员工管理",
          type: 1,
          code: "employees",
          description: "用户管理菜单",
          pid: "0",
          enVisible: "0",
        },
        {
          id: "1063315194329042944",
          name: "用户删除按钮",
          type: 2,
          code: "point-user-delete",
          description: "用户删除按钮",
          pid: "1063315016368918528",
          enVisible: "1",
        },
        {
          id: "1063327833876729856",
          name: "组织架构",
          type: 1,
          code: "departments",
          description: "组织架构菜单",
          pid: "0",
          enVisible: "1",
        },
        {
          id: "1063328310592933888",
          name: "用户添加按钮",
          type: 2,
          code: "POINT-USER-ADD",
          description: "用户添加按钮",
          pid: "1063315016368918528",
          enVisible: "1",
        },
        {
          id: "1063328532492587008",
          name: "用户修改按钮",
          type: 2,
          code: "POINT-USER-UPDATE",
          description: "用户修改按钮",
          pid: "1063315016368918528",
          enVisible: "1",
        },
        {
          id: "1064104257952813056",
          name: "权限管理",
          type: 1,
          code: "permissions",
          description: "权限菜单",
          pid: "0",
          enVisible: "1",
        },
      ],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      // 递归算法转化树形
      const res = transTree(await getAllPermission());
      this.tableData = res;
      console.log(res);
      //
    },
    // 【添加/编辑权限】
    openAddOrEditDialog(type, row,num) {
      if (type == "add") {
        this.ruleForm = {
          enVisible: "1",
        };
        this.ruleForm.pid = row.id;
        this.ruleForm.type = num;
        console.log("my pid", row.pid);
      } else {
        this.ruleForm = { ...row };
      }
      this.type = type;
      this.dialogVisible = true;
    },
    // 删除
    async handleDel(id) {
      await this.$confirm("您确定要删除该权限?");
      await delPermission(id);
      await this.$message.success("删除成功");
      this.fetchData();
    },
    // 确定
    async handleSubmit() {
      if (this.ruleForm.id) {
        // 调用编辑的接口
        console.log(this.ruleForm);
        await putPermission(this.ruleForm);
      } else {
        // 调用添加的接口
        console.log("添加权限啊啊啊", this.ruleForm);
        await addPermission(this.ruleForm);
      }
      await this.$message.success("操作成功");
      this.dialogVisible = false;
      this.fetchData();
    },
  },
};
</script>

<style>
</style>
